<script lang="ts">
import { defineComponent, PropType } from "vue";
import { CompSchema } from "@/components/RenderEngine/index";
import TreeUtil from "@/utils/TreeUtil";

export default defineComponent({
  name: "MeiRenderEngine",
  props: {
    schema: {
      type: Object as PropType<CompSchema>,
      required: true,
    },
  },
  computed: {
    finalConfig: function (): CompSchema {
      let result = TreeUtil.map2<CompSchema, CompSchema>(
        this.schema,
        (node) => node.subSchemas,
        (node, subNodes) => (node.subSchemas = subNodes),
        (node) => {
          return { ...node, cmpName: "Mei" + node.cmpName };
        }
      )!;
      console.log(result);
      return result;
    },
  },
});
</script>

<template>
  <div class="mei-render-engine">
    <component
      class="engine-comp"
      :is="finalConfig.cmpName"
      v-bind="finalConfig"
    >
    </component>
  </div>
</template>

<style scoped lang="scss"></style>
